<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-01 11:11:29
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:18:42
-->

<template>
  <div class="register">
    <div class="registerContent">
      <div class="register-logo">
        <div class="logo">
          <img src="@/assets/images/loginLogo.jpg" alt="" />
        </div>
        <div class="register-tip">
          <span>已有账号，</span>
          <span class="toLogin" @click="toLogin">马上登录</span>
        </div>
      </div>
      <div class="registerContent-title">
        <div class="registerAccount">账号注册</div>
      </div>
      <div class="registerContent-apply">
        <el-form
          :model="registerForm"
          ref="registerForm"
          :rules="registerRules"
        >
          <el-form-item
            prop="type"
            class=""
            style="width: 328px; margin-top: 32px"
          >
            <el-select v-model="registerForm.type" placeholder="请选择账号类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 328px; margin-top: 32px">
            <el-input v-model="registerForm.mobile" placeholder="手机号">
            </el-input>
          </el-form-item>
          <el-form-item style="width: 328px; margin-top: 32px">
            <JcRange status="status" :successFun="onSuccess"></JcRange>
          </el-form-item>
          <div v-if="status">
            <el-form-item prop="code" style="width: 328px; margin-top: 32px">
              <el-input v-model="registerForm.code" placeholder="验证码">
                <template slot="suffix">
                  <el-button
                    type="text"
                    style="font-size: 14px; font-weight: 400"
                    @click="getCode"
                    v-if="codeShow"
                  >
                    获取验证码
                  </el-button>
                  <el-button type="text" v-if="!codeShow">
                    {{ count }}秒后重试
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="registerForm.type !== '' && registerForm.type !== 1"
              prop="name"
              style="width: 328px; margin-top: 32px"
            >
              <el-input
                v-model="registerForm.name"
                :placeholder="placeholder"
              ></el-input>
            </el-form-item>
            <el-form-item style="width: 328px; margin-top: 32px">
              <el-input
                v-model="registerForm.invitation"
                placeholder="请输入邀请码(选填)"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item prop="checked" style="width: 328px; margin-top: 32px">
            <div class="check">
              <el-checkbox v-model="registerForm.checked"></el-checkbox>
              我已阅读并接受<span style="color: #1267fa">
                <a href="https://tongxingzhou.cn/html/support.html?choioose=3">
                  《隐私协议》
                </a>
              </span>
              和
              <span style="color: #1267fa">
                <a href="https://tongxingzhou.cn/html/support.html?choioose=2">
                  《用户协议》
                </a>
              </span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onRegister"
              :disabled="disabled"
              class="but"
            >
              注册完成
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import JcRange from "@/components/JcRange/index.vue";
import { getPhoneCode, register } from "@/api/login";
export default {
  components: {
    JcRange,
  },
  data() {
    return {
      disabled: true,
      placeholder: "",
      options: [
        {
          value: 1,
          label: "个人用户",
        },
        {
          value: 2,
          label: "企业用户",
        },
        // {
        //   value: 3,
        //   label: "服务商用户",
        // },
        // {
        //   value: 4,
        //   label: "学校用户",
        // },
      ],
      status: false,
      timer: null,
      count: "",
      codeShow: true,
      informationShow: true,
      registerForm: {
        type: 1,
        mobile: "",
        code: "",
        checked: [],
        name: "",
        invitation: "",
      },
      registerRules: {
        type: [
          { required: true, message: "请选择注册类型", trigger: "change" },
        ],
        name: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        checked: [
          {
            type: "array",
            required: true,
            message: "请勾选协议",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    registerForm: {
      deep: true,
      handler(val) {
        if (val.type == 2) {
          this.placeholder = "请输入企业名称";
        } else if (val.type == 3) {
          this.placeholder = "请输入服务商名称";
        } else if (val.type == 4) {
          this.placeholder = "请输入学校名称";
        }
      },
    },
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    onSuccess() {
      this.status = true;
      this.disabled = false;
    },
    // 按键注册
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.onRegister();
      }
    },

    onRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (!valid) return;
        register(this.registerForm).then((res) => {
          this.$message.success(res.msg);
          this.$router.push("/login");
        });
      });
    },
    // onRegister() {
    //   this.$refs.registerForm.validate((valid) => {
    //     if (!valid) return;
    //     this.$store
    //       .dispatch("onRegister", this.registerForm)
    //       .then(() => {
    //         this.$router.push({ path: this.redirect || "/" }).catch(() => {
    //           this.$message.error("登陆失败,请重新登录");
    //         });
    //       })
    //       .catch(() => {
    //         this.loading = false;
    //         if (this.captchaOnOff) {
    //           this.$message.error("登陆失败,请重新登录");
    //         }
    //       });
    //   });
    //   this.informationShow = false;
    // },
    getCode() {
      let that = this;
      var Reg = /^[1][345789][0-9]{9}$/;
      // 正则验证
      if (Reg.test(that.registerForm.mobile)) {
        this.$message.success("验证码发送成功");
        const TIME_COUNT = 60;
        if (!this.timer) {
          that.count = TIME_COUNT;
          that.codeShow = false;
          that.timer = setInterval(() => {
            if (that.count > 0 && that.count <= TIME_COUNT) {
              that.count--;
            } else {
              that.codeShow = true;
              clearInterval(this.timer);
              that.timer = null;
            }
          }, 1000);
        }
        getPhoneCode({
          mobile: this.registerForm.mobile,
        }).then((res) => {
          console.log(res);
        });
      } else {
        this.$message.error("请输入正确的手机号");
      }
    },
    toLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  .registerContent {
    // margin-top: 100Px;
    border-radius: 4px;
    width: 900px;
    background-color: #fff;
    .register-logo {
      background-color: #f4f4f4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;
      .logo {
        width: 210px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .toLogin {
        color: #1267fa;
        cursor: pointer;
      }
    }
    .registerContent-title {
      border-radius: 4px 4px 0 0;
      width: 100%;
      height: 80px;
      background-color: #1267fa;

      .registerAccount {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        color: #fff;
        text-align: center;
        line-height: 80px;
      }
    }
    .registerContent-apply {
      display: flex;
      justify-content: center;
      margin-top: 9px;
    }
  }
}
.but {
  color: #fff;
  background-color: #1267fa;
  font-size: 16px;
  width: 328px;
  margin-bottom: 60px;
}
/deep/ .el-input__inner {
  width: 328px;
  height: 40px;
  font-size: 14px;
  color: #2b2b2b;
  &::placeholder {
    font-size: 14px;
  }
}
.check {
  font-size: 14px;
}
</style>